সিএসএস সিনট্যাক্স(CSS Syntax)

সিএসএস সিলেক্টর এবং ডিক্লেয়ারেশন ব্লকের সমন্বয়ে একটি সিএসএস রুল-সেট গঠিত হয়।

আপনি যে এইচটিএমএল এলিমেন্টকে ষ্টাইল করতে চান তাকেই সিএসএস সিলেক্টর বলা হয়।

সিএসএসে এক বা একাধিক ডিক্লেয়ারেশন ব্লক থাকতে পারে। একের অধিক ডিক্লেয়ারেশন ব্লককে সেমিকোলনের মাধ্যমে পৃথক করা হয়।

প্রতিটি ডিক্লেয়ারেশন ব্লকে একটি সিএসএস প্রোপার্টির নাম ও একটি ভ্যালু থাকে এবং কোলনের মাধ্যমে এদেরকে পৃথক করা হয়।

প্রতিটি সিএসএস ডিক্লেয়ারেশন ব্লক সর্বদাই সেমিকোলনের মাধ্যমে শেষ হয় এবং ডিক্লেয়ারেশন ব্লক/ব্লকসমূহ Curly Braces(দ্বিতীয় বন্ধনী) দ্বারা বেষ্টিত থাকে।

নিচের উদাহরণে সবগুলো < p> এলিমেন্টের জন্য টেক্সটের এলাইনমেন্ট center এবং কালার red সেট করা হয়েছেঃ

kt_satt_skill_example_id=151

সিএসএস সিলেক্টর

name, id, class, attribute ইত্যাদির উপর ভিত্তি করে বিভিন্ন এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য সিএসএস সিলেক্টরসমূহ ব্যবহার করা হয়।

এলিমেন্ট সিলেক্টর

এইচটিএমএল এলিমেন্টের নামানুসারে এলিমেন্টকে সিলেক্ট করার জন্য এলিমেন্ট সিলেক্টর ব্যবহার করা হয়।

নিচের উদাহরণের মত আপনি একটি পেজের সবগুলো < p> এলিমেন্টকে স্টাইল করতে পারেনঃ

kt_satt_skill_example_id=153

id সিলেক্টর

এইচটিএমএল এলিমেন্টের id এট্রিবিউট ব্যবহার করে যেকোন একটি নির্দিষ্ট এলিমেন্টকে সিলেক্ট করা হয়।

একটি এলিমেন্টের id এট্রিবিউটের নাম অবশ্যই পেজে শুধুমাত্র একটি থাকতে পারবে। একই নাম দিয়ে একাধিক এলিমেন্টকে সিলেক্ট করতে চাইলে class এট্রিবিউট ব্যবহার করুন।

নির্দিষ্ট id সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে #(হ্যাশ) ক্যারেক্টার তারপরে ঐ এলিমেন্টের আইডির নাম লিখতে হবে।

নিচেে উদাহরণে id এর সাহায্যে একটি এলিমেন্টকে সিলেক্ট করে দেখানো হলোঃ

kt_satt_skill_example_id=155

বিঃদ্রঃ id নাম কখনোই নাম্বার দিয়ে শুরু করা যাবে না।

class সিলেক্টর

class সিলেক্টরের মাধ্যমে এক বা একাধিক class এট্রিবিউট সম্বলিত এলিমেন্টসমূহ সিলেক্ট করা যায়।

নির্দিষ্ট class সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে .(ডট) ক্যারেক্টার তারপরে ঐ এলিমেন্টের class এর নাম লিখতে হবে।

নিচের উদাহরণে class এট্রিবিউট ব্যবহার করে এলিমেন্ট সিলেক্ট করে দেখানো হলোঃ

kt_satt_skill_example_id=165

এছাড়াও আপনি চাইলে এলিমেন্টের নামের সাথে class সিলেক্টর ব্যবহার করে নির্দিষ্ট এইচটিএমএল এলিমেন্টকে সিলেক্ট করতে পারেন।

নিচের উদাহরণে শুধুমাত্র "text" নামের ক্লাসযুক্ত < p> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

kt_satt_skill_example_id=167

এইচটিএমএল এলিমেন্টের মধ্যে ভিন্ন ভিন্ন কাজের জন্য একের অধিক ক্লাসও ব্যবহার করা যায়।

নিচের উদাহরণে class="text" এবং class="para" অনুসারে < p> এলিমেন্টকে স্টাইল করা হয়েছেঃ

kt_satt_skill_example_id=169

বিঃদ্রঃ class নাম কখনোই নাম্বার দিয়ে শুরু করা যাবে না।

গ্রুপ সিলেক্টর

আপনি অনেকগুলো এলিমেন্টের একই রকম স্টাইল করতে চাইলে গ্রুপ সিলেক্টর ব্যবহার করতে পারেন। যেমনঃ

h1 {
 text-align: center;
 color: slateblue;
}
h2 {
 text-align: center;
 color: slateblue;
}
p {
 text-align: center;
 color: slateblue;
}

কোডের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করতে হয়। গ্রুপ সিলেক্টরের ক্ষেত্রে সিলেক্টরসমূহকে কমা দ্বারা পৃথক করতে হয়।

নিচের উদাহরণে উপরের কোডসমূহের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করে সিলেক্ট করা হয়েছেঃ

kt_satt_skill_example_id=171

সিএসএস কমেন্ট

সংক্ষেপে কোডের কাজ ব্যাখ্যা করার জন্য কমেন্ট ব্যবহার করা হয়। কমেন্ট আপনাকে পরবর্তী সময়ে এই কোড নিয়ে কাজ করতে সাহায্য করবে।

ব্রাউজার কখনোই কমেন্ট/কমেন্টসমূহ প্রদর্শন করে না।

সিএসএসে কমেন্ট শুরু হয় /* দিয়ে এবং শেষ হয় */ দিয়ে। এই কমেন্ট আবার একাধিক লাইনেরও হতে পারে।

kt_satt_skill_example_id=173